<template>
  <div class="tpl39-head">
    <section
      class="modulePadding mob48"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">

      <div class="header_title mobSearch48 clearfix">
        <a @click="JumpName('item-class-list')" class="ico_left fl"><i></i><span>分类</span></a>
        <div class="search_form">
          <div class="formitem">
            <span class="j-search-button" @click="searchList">
              <!-- <svg-icon icon-class="icon_search" class="icon_search" /> -->
            </span>
            <input class="search-39input" @confirm="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" />
          </div>
        </div>
        <a @click="JumpName('member')" class="ico_right fr"><i></i><span>会员</span></a>
      </div>
  
      <section v-if="tplItemData.datasetNav && tplItemData.datasetNav.length>0" class="nav-classify mobNav48 clearfix">
        <div class="mobNavBox">
          <ul>
            <li :class="[index==cur?'cur':'']" v-for="(item,index) in tplItemData.datasetNav" :key="index" >
              <a @click="openLink(item.link)"><span>{{ item.showtitle }}</span></a>
            </li>
          </ul>
        </div>
      </section>
    </section>

    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        showIndicators: true,
        autoplay: true,
        imgadvWxH: 0,
        keyword: '',
        cur: 0
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      }
    },
    mounted() {
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl39-head{
    .header_title{
      width:100%;
      height:90px;
      background-color:#fff;
      background-repeat:no-repeat;
      background-position:center center;
      background-size:20%;
      text-align:center;
      padding:10px 0;
      &>a{
        display: inline-block;
        *display:inline;
        *zoom:1;
        text-align: center;
        color: #909090;
        padding:0 8px;
        i{
          display: block;
          height: 36px;
          width:48px;
          background-repeat:no-repeat;
          background-position:center;
          background-size:contain;
          margin:0 auto;
        }
        span{
          display: block;
          font-size: 20px;
          margin-top: 6px;
        }
        &.ico_left{
          padding-left: 3.125%;
          i{
            width:30px;
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl39/39menu.png);
          }
        
        }
        &.ico_right{
          padding-right: 3.125%;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl39/39user.png);
          }
        }
      }
      .search_form{
        display: inline-block;
        // *display:inline;
        // *zoom:1;
        background:#f9f9f9;
        vertical-align: top;
        padding: 6px 0;
        width: 74%;
        border-radius:48px;
        border:2px solid #efefef;
        .j-search-button{
          width: 30px;
          height: 30px;
          float: left;
          margin: 10px 0 0 20px;
          background-image:url(https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png);
          background-repeat:no-repeat;
          background-position:center center;
          background-size:100%;
        }
        input{
          width: 80%;
          /*height: 48px;*/
          /*line-height: 48px;*/
          /*height: 20px !important;*/
          /*line-height: 20px !important;*/
          text-indent: 8px;
          border:none;
          background:#f9f9f9;
          color:#999;
        }
        .formitem{
          .search-39input{
            height: 48px !important;
            line-height: 48px !important;
            min-height: 48px !important;
        }
        }
      }
    }
    .nav-classify{
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      background: #fff;
      margin-bottom: 10px;
      height: 66px;
      .mobNavBox{
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling:touch;
        padding-bottom: 40px;
      
        ul{
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          li{
            display: inline-block;
            margin-right: 10px;
            //border:1px solid #eee;
            text-align: center;
            min-width: 140px;
            font-size: 24px;
            color:#666666;
            &.cur:after {
              content: "";
              width: 30%;
              margin: 0 auto;
              display: inherit;
              border-bottom: 2px solid #ff3d3b;
              border-radius: 2px;
              box-shadow: 0 2px 4px #ff3d3b;
            }
            a{
              text-decoration:none;
              color:#666666;
              overflow: hidden;
              span{
                padding:10px 0;
                display: inline-block;
                white-space: nowrap;
                max-width: 130px;
                overflow: hidden;
              }
            }
          
          }
          li.cur:after{
            content: "";
            width: 30%;
            margin: 0 auto;
            display: inherit;
            border-bottom: 4px solid #ff3d3b;
            border-radius: 4px;
            box-shadow: 0px 4px 8px #ff3d3b;
          }
          li.cur{
            span{
              font-weight: 500;
              color:#1a1a1a;
              font-size: 26px;
            }
          }
        }
      }
    
    }
  }
</style>
